<template>
  <view class="content">
    <!-- <view class="content_slide" v-if="isSlide === true">
      <view class="content_slide_top" :style="'padding-top:' + demoSize.top + 'px;'">
        <view class="content_slide_search" :style="'height:' + demoSize.height + 'px;'">
          <view>每次生成作品消耗10积分</view>
          <text>赚积分</text>
          <image src="/static/tabs/more.png" />
        </view>
      </view>
      <view style="width: 100%;background-color: #f7f7f7;margin-top: -2rpx;">
        <view class="content_slide_tabs">
          <view class="content_header_tabs_container" @scroll="handleScroll">
            <view class="content_header_tabs_container_items" :class="item.id == TopicID ? 'active' : ''"
              v-for="item in tabsList" :key="item.id">
              <view class="content_header_tabs_container_items_text" @click="handleChangeTabs(item)">{{ item.topicName
                }}
              </view>
              <image v-if="item.id == TopicID" class="content_header_tabs_container_items_select"
                src="/static/tabs/home_check.png" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <scroll-view scroll-y="true" class="scroll-Y" @scroll="scrollHandler">
      <!-- <scroll-view scroll-y="true" class="scroll-Y" @scroll="scrollHandler" refresher-enabled="true"
      :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh"> -->
      <view class="content_header">
        <view class="content_header_title"
          :style="'padding-top:' + demoSize.top + 'px;' + 'height:' + demoSize.height + 'px;'">
          <image src="/static/tabs/logo12.jpg" mode="widthFix" />
        </view>
        <!-- <view class="content_header_search">
          <view>每次生成作品消耗10积分</view>
          <text>赚积分</text>
          <image src="/static/tabs/more.png" />
        </view> -->
        <view class="content_header_tabs">
          <view class="content_header_tabs_container" @scroll="handleScroll">
            <view class="content_header_tabs_container_items" :class="item.id == TopicID ? 'active' : ''"
              v-for="item in tabsList" :key="item.id">
              <view class="content_header_tabs_container_items_text" @click="handleChangeTabs(item)">{{ item.topicName
              }}
              </view>
              <image v-if="item.id == TopicID" class="content_header_tabs_container_items_select"
                src="/static/tabs/home_check.png" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
      <view v-if="isSlide" style="background-color: #f7f7f7;"
        :style="'height:' + (demoSize.top + demoSize.height + 50) + 'px;'"></view>
      <!-- 加载时占位符 -->
      <view class="content_main1" v-if="!listflag">
        <view class="itembox" v-for="(item, index) in 6" :key="index" slot="slot{{index}}">
          <view class="imgbox">
          </view>
          <view class="title"></view>
        </view>
      </view>
      <!-- list数据 -->
      <view class="content_main" v-else>
        <Waterfalls v-if="dataList.length > 0" ref="waterfallsFlowRef" :value="dataList" :column="column"
          :columnSpace="1.5" :seat="2" @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
          <view class="item" v-for="(item, index) in dataList" :key="index" slot="slot{{index}}">
            <view class="parentsame">
              <view class="content_main_same">
                <image src="/static/tabs/home_cameraicon.png" mode="" />
                拍同款
              </view>
              <!-- <view class="content_main_clothes" v-if="item.jacketImageUrl">
                <view>
                  <image :src="item.jacketImageUrl" mode="aspectFit" />
                </view>
                <view v-if="item.trousersImageUrl">
                  <image :src="item.trousersImageUrl" mode="aspectFit" />
                </view>
              </view> -->
            </view>
            <view class="title">{{ item.title }}</view>
          </view>
          <!-- <template v-slot:default="item">
            <view class="item">
              <view class="title">{{ item.title }}</view>
              <view class="desc">{{ item.desc }}</view>
            </view>
          </template> -->
        </Waterfalls>
        <view class="content_main_none" v-else>
          暂无数据
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { onLoad, onShow, onReady, onShareAppMessage } from "@dcloudio/uni-app"
import Waterfalls from "../../components/waterfalls/custom-waterfalls-flow.vue";
import { useUserStore } from '@/stores'
import { GetModeList, WxUserLogin, reqGetTopicList } from "@/api/user";
const userStore = useUserStore()
const TopicName = ref('') //搜索词条
const activeId = ref(0) //定义选中配置
const column = ref(2) //瀑布流组件设置几行
const isSlide = ref(false) //滑动加载顶部导航变化
const threshold = ref() //滑动加载触发值
const tabsList = ref<any>([])
const demoSize = reactive({ //胶囊位置顶部距离和高度
  top: 0,
  height: 0
})
const dataList: any = ref([])
const isRefreshing = ref(false)
const listflag = ref(false)
const TopicID = ref(0)
onLoad(async (options: any) => {
  // console.log(options, 'canshu');
  // console.log(decodeURIComponent(options.scene));
  if (options.id) {
    let id = options.id == undefined ? '' : options.id
    wx.setStorageSync('scene', id);
  } else if (options.scene) {
    let scene = decodeURIComponent(options.scene).split('=')[1]
    wx.setStorageSync('scene', scene);
  }

  // 获取小程序右上角胶囊位置信息
  const demo = uni.getMenuButtonBoundingClientRect()
  demoSize.top = demo.top
  demoSize.height = demo.height
  threshold.value = (demo.top + demo.height) * 2 + 300 / 2
})
onShow(() => {
  gettablist()
  getList()
  // console.log('执行onShow')
})
onReady(() => {
  uni.showShareMenu({
    withShareTicket: true, // 是否开启带 shareTicket 的分享
  });
});
onShareAppMessage(() => {
  return {
    title: '一键AI换脸！效果简直惊呆我了...',
    path: `/pages/home/index?id=${userStore.userInfo?.id}`,
    imageUrl: 'https://statics.lvpaizhijia.com/img/1745290957532.jpg'
  }
})
const gettablist = async () => {
  let res: any = await reqGetTopicList()
  if (res.code == 0) {
    tabsList.value = res.data.result
    tabsList.value.unshift({ id: 0, topicName: '热门' })
    if (userStore.userInfo?.id) {
      userStore.userInfo.punti = res.data.punti
    }
    // getList()
  }
}
// 模板列表
const getList = async () => {
  let data = {
    TopicID: TopicID.value,
  }
  let res: any = await GetModeList(data)
  if (res.code == 0) {
    dataList.value = res.data.map((item: any) => ({
      ...item,
      image: item.thuImageUrl,
      title: item.modeName
    }))
    listflag.value = true
  }
}
// 滑动加载
const scrollHandler = (e: any) => {
  // const scrollTop = e.detail.scrollTop;
  // isSlide.value = scrollTop > threshold.value
}
// 标签页滑动显示
const handleScroll = (event: Event) => {
  // console.log('Scrolled', event);
}
// 标签页切换
const handleChangeTabs = (item: any) => {
  TopicID.value = item.id
  TopicName.value = item.id == 0 ? '' : item.topicName
  dataList.value = []
  getList()
}
// 瀑布流数据单项点击事件
const wapperClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/creation/index?id=${TopicID.value}&name=${TopicName.value}&activeid=${item.id}&img=${item.thuImageUrl}`
  })
}
// 瀑布流数据图片点击事件
const imageClick = (item: any) => {
  // console.log(item);
  uni.navigateTo({
    url: `/pages/creation/index?id=${TopicID.value}&name=${TopicName.value}&activeid=${item.id}&img=${item.thuImageUrl}`
  })
}
// 瀑布流数据加载完成事件
const loaded = () => {
  // console.log('加载完成')
}

// const onRefresh = async () => {
// try {
//   isRefreshing.value = true
//   dataList.value = []
//   await getList()
// } finally {
//   isRefreshing.value = false
// }
// }

</script>

<style lang="scss">
page {
  background-color: #F7F7F7;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .scroll-Y {
    height: 100vh;
  }

  &_header {
    width: 100%;
    // height: 620rpx;
    background-image: url('https://statics.lvpaizhijia.com/img/1746689038507.jpg');
    background-size: 100% 100%;
    animation: fadeIn 0.5s ease-in-out;
    // padding: 0 32rpx;

    &_title {
      // width: 130rpx;
      margin-left: 32rpx;
      font-weight: bold;
      font-size: 36rpx;
      display: flex;
      align-items: center;
      color: #FF00FF;

      image {
        width: 200rpx;
        height: 80rpx;
      }
    }

    &_search {
      display: flex;
      align-items: center;
      width: 686rpx;
      height: 60rpx;
      border-radius: 10rpx;
      border: 2rpx solid #888;
      margin: auto;
      margin-top: 32rpx;
      position: relative;

      view {
        font-weight: 400;
        font-size: 25rpx;
        color: #888;
        line-height: 60rpx;
        padding-left: 20rpx;
      }

      text {
        font-weight: 400;
        font-size: 25rpx;
        color: #666;
        line-height: 60rpx;
        position: absolute;
        right: 42rpx;
      }

      image {
        width: 16rpx;
        height: 24rpx;
        position: absolute;
        right: 20rpx;
      }

      input {
        width: 582rpx;
        height: 72rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;
      }
    }

    &_module {
      width: 624rpx;
      margin: auto;
      margin-top: 48rpx;
      display: flex;
      justify-content: space-between;


      &_items {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 136rpx;
          height: 136rpx;
        }

        view {
          font-weight: 400;
          font-size: 24rpx;
          color: #222222;
          margin-top: 20rpx;
        }
      }
    }

    &_tabs {
      width: 646rpx;
      height: 58rpx;
      margin: auto;
      margin-top: 50rpx;
      display: flex;
      flex-direction: column;

      &_container {
        width: 646rpx;
        // height: 56rpx;
        display: flex;
        align-items: baseline;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 60rpx;

        &_items {
          flex-shrink: 0;
          min-width: 0;
          // max-width: calc(646rpx / 4 - 128rpx);
          display: flex;
          flex-direction: column;
          /* justify-content: center; */
          align-items: center;

          &_text {
            // width: 64rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #888888;
            // line-height: 44rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &_select {
            width: 20rpx;
            height: 4rpx;
            margin-top: 2rpx;
          }
        }

        .active {
          .content_header_tabs_container_items_text {
            // width: 90rpx;
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
            // line-height: 50rpx;
          }
        }
      }

      &_container::-webkit-scrollbar {
        display: none;
      }
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      /* 开始时元素完全透明 */
    }

    to {
      opacity: 1;
      /* 动画结束时元素不透明 */
    }
  }

  &_slide {
    width: 100%;
    // background: #fff;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    z-index: 9;
    animation: fadeIn 0.3s ease-in-out;

    &_top {
      width: 100%;
      background-color: #fff;
      padding-bottom: 12rpx;
    }

    &_title {
      width: 108rpx;
      margin-left: 32rpx;
      font-weight: bold;
      font-size: 40rpx;
      display: flex;
      align-items: center;
    }

    &_search {
      display: flex;
      align-items: center;
      width: 496rpx;
      height: 60rpx;
      border-radius: 10rpx;
      background: #f7f7f7;
      margin-left: 32rpx;
      position: relative;

      view {
        font-weight: 400;
        font-size: 25rpx;
        color: #666;
        line-height: 60rpx;
        padding-left: 20rpx;
      }

      text {
        font-weight: 400;
        font-size: 25rpx;
        color: #666;
        line-height: 60rpx;
        position: absolute;
        right: 42rpx;
      }

      image {
        width: 16rpx;
        height: 24rpx;
        position: absolute;
        right: 20rpx;
      }

      input {
        width: 392rpx;
        height: 64rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #888888;
      }
    }

    &_module {
      width: 624rpx;
      margin: auto;
      margin-top: 48rpx;
      display: flex;
      justify-content: space-between;

      &_items {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 136rpx;
          height: 136rpx;
          background: #E0E0E0;
        }

        view {
          font-weight: 400;
          font-size: 24rpx;
          color: #222222;
          margin-top: 20rpx;
        }
      }
    }

    &_tabs {
      width: 646rpx;
      height: 56rpx;
      margin: auto;
      padding-top: 36rpx;
      display: flex;
      flex-direction: column;

      &_container {
        width: 646rpx;
        // height: 56rpx;
        display: flex;
        align-items: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 128rpx;

        &_items {
          flex-shrink: 0;
          min-width: 0;
          // max-width: calc(646rpx / 4 - 128rpx);
          display: flex;
          flex-direction: column;
          /* justify-content: center; */
          align-items: center;

          &_text {
            width: 64rpx;
            font-weight: 400;
            font-size: 32rpx;
            color: #888888;
            // line-height: 44rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          &_select {
            width: 20rpx;
            height: 4rpx;
            margin-top: 2rpx;
          }
        }

        .active {
          .content_header_tabs_container_items_text {
            width: 72rpx;
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
            // line-height: 50rpx;
          }
        }
      }
    }
  }

  &_main1 {
    width: calc(100% - 64rpx);
    margin: 16rpx 32rpx 0 32rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: calc(100% - 290rpx);
    overflow-y: auto;
    overflow-x: hidden;

    .itembox {
      width: 338rpx;
      height: 510rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      margin-bottom: 12rpx;

      .imgbox {
        width: 338rpx;
        height: 438rpx;
        background: #E0E0E0;
        border-radius: 12rpx 12rpx 0rpx 0rpx;
      }

      .title {
        margin: 18rpx auto;
        width: 296rpx;
        height: 36rpx;
        background: #E0E0E0;
      }
    }
  }

  &_main {
    width: calc(100% - 64rpx);
    height: calc(100% - 290rpx);
    margin: 16rpx 32rpx 0 32rpx;
    overflow-y: auto;
    overflow-x: hidden;

    .item {
      border-radius: 12rpx;
    }

    .title {
      background: #fff;
      padding: 20rpx;
      font-weight: 500;
      font-size: 26rpx;
      color: #444444;
    }

    .parentsame {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      position: relative;
    }

    &_same {
      width: 114rpx;
      height: 44rpx;
      line-height: 42rpx;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 22rpx;
      // border: 1rpx solid #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      // padding: 0 14rpx;
      // position: absolute;
      // bottom: 84rpx;
      // right: 12rpx;
      position: relative;
      margin-top: -60rpx;
      margin-right: 12rpx;
      color: #fff;
      font-weight: 400;
      font-size: 20rpx;

      image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 6rpx;
      }
    }

    &_clothes {
      position: absolute;
      left: 12rpx;
      bottom: 12rpx;
      display: flex;
      flex-direction: column;

      view {
        width: 76rpx;
        height: 76rpx;
        border-radius: 12rpx;
        background-color: #fff;
        margin-top: 8rpx;
      }

      image {
        width: 66rpx;
        height: 66rpx;
        border-radius: 12rpx;
        margin: 5rpx;
      }
    }

    &_none {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 32rpx;
      color: #888888;
      margin-top: 80rpx;
    }
  }
}
</style>
